<template>
	<view class="count">
		<button open-type="chooseAvatar" @chooseavatar="chooseavatarss" :plain="true"
			class="btnBg b-r-20 f f-a-c f-j-b">
			<view class="avactTit">
				头像
			</view>
			<view class="avactImg f f-a-c">
				<image :src="image?image:'/static/logo.png'" class="imgAct" mode=""></image>
				<image src="/static/my/you.png" class="rightImg" mode=""></image>
			</view>
		</button>
		<view @click="btnSubmit" class="btnSubmit">
			确定
		</view>
		<view @click="skip" class="cancel">
			跳过
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// image: uni.getStorageSync('userinfo').avatar,
				image: ''
			}
		},
		onShow() {
			this.qiniuAuth()
		},
		methods: {
			// 获取七牛云token
			async qiniuAuth() {
				let n = await this.$api.Setup()
				uni.setStorageSync('setup', n.data)
				uni.setStorageSync('domain', n.data.qiniu_config.domain)
				uni.setStorageSync('upload_token', n.data.qiniu_config.upload_token)
				uni.setStorageSync('upload_domain', n.data.qiniu_config.upload_domain)
				console.log(n);
				// this.token = n.content.token
				// uni.setStorageSync('qinNiu', n.content.token)https://up-z2.qiniup.com2024-03-18/MXl9twPwd9GoRBBI.png
			},
			// 跳过
			skip() {
				uni.setStorageSync('avatar', this.image)
				uni.navigateTo({
					url: '/pageA/Introduction'
				})
			},
			async btnSubmit() {
				let n = await this.$api.ProfilePost({
					avatar: this.image,
				})
				uni.navigateTo({
					url: '/pageLogin/settingInp'
				})
			},
			upLoad(filePath) {
				uni.uploadFile({
					url: uni.getStorageSync('upload_domain'), //华东地区上传
					filePath: filePath,
					name: 'file',
					method: 'POST',
					formData: {
						key: `${this.$u.timeFormat(new Date(), 'yyyy-mm-dd')}/${this.randomString()}.png`,
						token: uni.getStorageSync('upload_token'),
					},
					success: async uploadFileRes => {
						uni.setStorageSync('avatar', '/' + JSON.parse(uploadFileRes.data).key)
						console.log(uploadFileRes, '123456789');
						this.image = uni.getStorageSync('domain') + '/' + JSON.parse(uploadFileRes.data).key
					},
					fail: fail => {

						// reject(fail)
					},
					complete: e => {
						console.log(e)
					}
				})
			},
			chooseavatarss(e) {
				console.log(e, '8888888');
				this.image = e.detail.avatarUrl
				this.upLoad(e.detail.avatarUrl)
			},
			randomString() {
				let str = 'ABCDEFGHIJKIMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
				let num = '';
				for (let i = 0; i < 16; i++) {
					num += str.charAt(Math.floor(Math.random() * str.length));
				}
				console.log(num, '000000000000');
				return num;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.btnSubmit {
		width: 94%;
		height: 88rpx;
		line-height: 85rpx;
		background: #009d85;
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: center;
		color: #ffffff;
		margin: 0 auto;
		margin-top: 100rpx;
		border-radius: 44rpx;
	}

	.cancel {
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		text-align: center;
		color: #999999;
		margin-top: 25rpx;
	}

	.btnBg {
		width: 94%;
		padding: 20rpx;
		margin: 0 auto;
		background-color: #fff;
		border: none;
		margin-top: 30rpx;

		.avactImg {
			.imgAct {
				width: 72rpx;
				height: 72rpx;
				background: rgba(0, 0, 0, 0.00);
				border-radius: 50%;
			}

			.rightImg {
				width: 15rpx;
				height: 20rpx;
				margin-left: 15rpx;
			}
		}

		.avactTit {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: 500;
			text-align: left;
			color: #666666;
		}
	}
</style>